import 'package:eyepetizer_example/widget/discovery/recommend_photo_page.dart';
import 'package:eyepetizer_example/widget/go_navigation.dart';
import 'package:flutter/material.dart';

import '../../model/discovery/recommend_model.dart';
import '../../page/discovery/recommend_video_page.dart';
import '../../utils/cache_image.dart';

const VIDEO_TYPE = 'video';
class RecommendItemWidget extends StatelessWidget {
  final RecommendItem item;
  const RecommendItemWidget({Key? key, required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        var type = item.data?.content?.type;
        type ??= "";
        if (type == VIDEO_TYPE) {
          GoNavigator.toPage(context, RecommendVideoPage(item: item,));
        } else {
          var urls = item.data?.content?.data?.urls;
          if(urls == null) {
            return;
          }
          GoNavigator.toPage(context, RecommendPhotoPage(galleryItems: urls));
        }
      },
      child: Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 图片展示
            _imageItem(context),
            // 文字简介
            _contentTextItem(),
            // 作者信息、点赞数
            _infoTextItem()
          ],
        ),
      ),
    );
  }

  /// 图片展示
  Widget _imageItem(BuildContext context) {
    var maxWidth = MediaQuery.of(context).size.width;
    int dataWidth = item.data?.content?.data?.width??0;
    int dataHeight = item.data?.content?.data?.height??0;
    // 安全处理，宽高实际都是有值的
    var width = dataWidth == 0
        ? maxWidth
        : dataWidth;
    var height = dataHeight == 0
        ? maxWidth
        :dataHeight;

    var aspectRatio = width / height;
    //AspectRatio：约束控件的宽高比，保证控件等比缩放
    return AspectRatio(
      aspectRatio: aspectRatio,
      child: Stack(
        children: [
          cacheImage(
            "${item.data?.content?.data?.cover?.feed}",
            shape: BoxShape.rectangle,
            width: maxWidth,
            fit: BoxFit.cover,
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(5.0), topRight: Radius.circular(5.0)),
            clearMemoryCacheWhenDispose: true, //图片从 tree 中移除，清掉内存缓存，以减少内存压力
          ),
          Positioned(
            top: 5,
            right: 5,
            // Offstage：控制是否显示组件，false 显示
            child: Offstage(
              // offstage 为 false 显示--如果是图片且只有一张，则不显示该图标
              offstage: item.data?.content?.data?.urls != null &&
                  item.data?.content?.data?.urls?.length == 1,
              child: Icon(
                item.data?.content?.type == VIDEO_TYPE
                    ? Icons.play_circle_outline
                    : Icons.photo_library,
                color: Colors.white,
                size: 18,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 文字简介
  Widget _contentTextItem() {
    return Container(
      padding: const EdgeInsets.fromLTRB(6, 10, 6, 10),
      child: Text(
        "${item.data?.content?.data?.description}",
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(fontSize: 14, color: Colors.black87),
      ),
    );
  }

  _infoTextItem() {
    return Container(
      padding: const EdgeInsets.fromLTRB(6, 0, 6, 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              //类似于ClipRRect
              PhysicalModel(
                color: Colors.transparent,
                clipBehavior: Clip.antiAlias,
                borderRadius: BorderRadius.circular(12),
                child: cacheImage(
                  "${item.data?.content?.data?.owner?.avatar}",
                  width: 24,
                  height: 24,
                ),
              ),
              Container(
                padding: const EdgeInsets.all(5),
                width: 80,
                child: Text(
                  "${item.data?.content?.data?.owner?.nickname}",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(fontSize: 12),
                ),
              )
            ],
          ),
          Row(
            children: <Widget>[
              const Icon(
                Icons.thumb_up,
                size: 14,
                color: Colors.grey,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 3),
                child: Text(
                  '${item.data?.content?.data?.consumption?.collectionCount}',
                  style: const TextStyle(fontSize: 12),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
